import { createRouter, createWebHistory } from 'vue-router'

// 导入视图组件
import AlbumDetails from '@/components/AlbumDetails.vue'
import PlaylistDetail from '@/components/PlaylistDetail.vue'
import SearchResults from '@/components/SearchResults.vue'
import SingerDetail from '@/components/SingerDetail.vue'
import SongDetail from "@/components/SongDetail.vue"
import Test from '@/components/Test.vue'
import UserMessage from "@/components/UserMessage.vue"
import UserProfile from "@/components/UserProfile.vue"
import VipSubscription from "@/components/VipSubscription.vue"
import Home from '@/views/Home.vue'
import MyMusic from '@/views/MyMusic.vue'
import Playlist from '@/views/Playlist.vue'
import Recommend from '@/views/Recommend.vue'
import Singer from '@/views/Singer.vue'
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/singer/:id',
        name: 'SingerDetail',
        component: SingerDetail,
        props: true
    },
    {
        path: '/home',
        name: 'Home',
        component: Home
    },
    {
        path: '/playlist',
        name: 'Playlist',
        component: Playlist
    },
    {
        path: '/singer',
        name: 'Singer',
        component: Singer
    },
    {
        path: '/vip/subscription',
        name: 'VipSubscription',
        component: VipSubscription
    },
    {
        path: '/test',
        name: 'Test',
        component: Test
    },
    {
        path: '/playlist/:id', // 动态路由参数
        name: 'PlaylistDetail',
        component: PlaylistDetail,
        props: true // 允许通过路由传参
    },
    {
        path: '/my-music',
        name: 'MyMusic',
        component: MyMusic
    },
    {
        path: '/recommend',
        name: 'Recommend',
        component: Recommend
    },
    {
        path: '/song/:id', // 确保路由路径包含:id参数
        name: 'SongDetail',
        component: SongDetail,
        props: true // 启用props接收路由参数
    },
    // 用户相关路由分组
    {
        path: '/user',
        children: [
            {
                path: 'profile',
                name: 'UserProfile',
                component: UserProfile
            },
            {
                path: 'messages', // 新增消息路由
                name: 'UserMessages',
                component: UserMessage,
                meta: { title: '我的消息' } // 可选元信息
            }
        ]
    },
    // 专辑详情路由
    {
        path: '/album/:albumId',
        name: 'AlbumDetails',
        component: AlbumDetails,
        props: true
    },
    {
        path: '/search',
        name: 'SearchResults',
        component: SearchResults,
        props: (route) => ({ 
            keyword: route.query.keyword || '',
            type: route.query.type || 'all'
        })
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router